<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    input[type=text]{width:100px;}
  </style>
</head>
<body>
  
  <input type="text" class="index">
  <input type="text" class="username">
  <input type="text" class="password">
  <input type="button" class="btn" value="添加">

  <table border="1" width="400">
    <thead>
      <tr>
        <th>编号</th>
        <th>用户名</th>
        <th>密码</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>

</body>
<script>

  // 选择器
  var index = $(".index");
  var un = $(".username");
  var pw = $(".password");
  var btn = $(".btn");
  var tbody = $("tbody");

  // 点击添加按钮
  btn.addEventListener("click", function(){
    // 创建td和tr
    var td1 = createEle("td");
    var td2 = createEle("td");
    var td3 = createEle("td");
    var td4 = createEle("td");
    var tr = createEle("tr");
    // 设置td内容
    td1.innerText = index.value;
    td2.innerText = un.value;
    td3.innerText = pw.value;
    td4.innerText = "删除";
    // 将td插入到tr
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    tr.appendChild(td4);
    // 将tr插入到tbody
    tbody.appendChild(tr);
    // 清空输入框
    index.value = un.value = pw.value = "";
    // 第一个输入框自动获取焦点
    index.focus();
    // 最后一个td绑定事件
    td4.onclick = function(){
      // 删除当前tr
      tr.remove();
    }
  })


  function $(s){
    return document.querySelector(s);
  }
  function createEle(tagName){
    return document.createElement(tagName)
  }
  
</script>
</html>